﻿<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PIGS-BANK</title>

    <link rel="stylesheet"
          href="${pageContext.request.contextPath }/paper/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/paper/css/style.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath }/staticfile/img/denglu.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/layui.css"  media="all">
    <style type="text/css">
        body {
            height:auto;
            background:url("${pageContext.request.contextPath }/uploadImage/as.jpeg") no-repeat center fixed;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
    </style>
</head>
<body>

<div class="materialContainer">
    <div class="box">
        <div class="title">欢迎登录&nbsp;PIGS-BANG</div>
        <div class="input">
            <label for="name">用户名</label>
            <input type="text" name="name" id="name" >
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="pass">密码</label>
            <input type="password" name="pass" id="pass">
            <span class="spin"></span>
        </div>
        <div class="button login">
            <button id="loginBtn">
                <span>登录</span>
                <i class="fa fa-check"></i>
            </button>
        </div>
        <a href="${pageContext.request.contextPath }/login" id="forgetPass" class="pass-forgot">使用旧版登录</a>
    </div>

    <div class="overbox">
        <div class="material-button alt-2" title="注册">
            <span class="shape"></span>
        </div>
        <div class="title">注册<span id="pigs" style="font-family: 'Oleo Script', cursive">&nbsp;PIGS-BANK</span></div>
        <div class="input">
            <label for="accountName">用户名</label>
            <input path="accountName" type="text" name="accountName" id="accountName" maxlength="20"/>

            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="accountPhone">手机号码</label>
            <input path="accountPhone" type="text" name="accountPhone" id="accountPhone" maxlength="11"/>

            <span class="spin"></span>
        </div>

        <div class="input">
            <label for="accountEmail">邮箱地址</label>
            <input path="accountEmail" type="text" name="accountEmail" id="accountEmail"maxlength="25"/>

            <span class="spin"></span>
        </div>


        <div class="input">
            <label for="accountPassword">密码</label>
            <input path="accountPassword" type="password" name="accountPassword" id="accountPassword" maxlength="50"/>

            <span class="spin"></span>
        </div>

        <div class="input">
            <label for="accountPassword2">确认密码</label>
            <input path="accountPassword2" type="password" name="accountPassword2" id="accountPassword2" maxlength="50"/>
            <span class="spin"></span>
        </div>

        <div class="button">
            <button id="btnRegister">
                <span>注册</span>
            </button>
        </div>
    </div>

</div>

<script src="${pageContext.request.contextPath }/paper/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/paper/js/index.js"></script>
<script src="${pageContext.request.contextPath }/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/layui/layui.all.js" charset="utf-8"></script>

<script type="text/javascript">
    $(function () {
        
    /*登录*/
    $("#loginBtn").click(function () {
        if ($("#name").val() == ""&&$("#pass").val() != "") {
            layer.msg('请输入用户名', {icon: 6,shift: 6});
            return false;
        }

        if ($("#name").val() != ""&&$("#pass").val() == "") {
            layer.msg('请输入密码', {icon: 2});
            return false;
        }

        if ($("#name").val() == ""&&$("#pass").val() == "") {
            layer.msg('请输入用户名', {icon: 6});
            return false;
        }

        if ($("#name").val() != "" && $("#pass").val() != "") {
            var index = layer.load(3, {time: 10*5000});
            $.ajax({
                //${pageContext.request.contextPath}
                url: "${pageContext.request.contextPath}/user/index",
                data: {
                    account_name: $("#name").val(),
                    password: $("#pass").val(),
                },
                type: 'post', //HTTP请求类型
                success: function (data) {
                    console.log("-----" + data);
                    //alert(data)
                    if (data == "200") {
                        console.log("登录成功")
                        layer.close(index);

                        layer.msg('登录成功', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            $('input#accountName').val("");
                            $('input#accountPassword2').val("");
                            $('input#accountEmail').val("");
                            $('input#accountPhone').val("");
                            $('input#accountPassword').val("");
                            window.location.href = "${pageContext.request.contextPath }/user/home";
                            $("#name").val("");
                        });

                    } else  if (data == "100") {
                        console.log("登录失败")
                        layer.close(index);
                        layer.msg('密码或者账户有误....', {
                            icon: 2,
                            time: 2300 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            //do something

                        });
                    }
                },
                error: function () {
                    console.log("登录异常")
                    layer.close(index);
                    layer.msg('系统繁忙...稍后重试！', {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });

                }
            });
        }

    })
    })

</script>


<script type="text/javascript">

    $(function () {

        $('#btnRegister').click(function () {

            var accountName = $('input#accountName').val();
            var accountPhone = $('input#accountPhone').val();
            var accountEmail = $('input#accountEmail').val();
            var accountPassword = $('input#accountPassword').val();
            var accountPassword2 = $('input#accountPassword2').val();

            if (accountName == '') {
                console.log("请输入用户名.")
                layer.msg('请输入用户名', {icon: 6});
                return false;
            }

            if (accountPhone == '') {
                console.log("请输入手机号码..")
                layer.msg('请输入手机号码', {icon: 6});
                return false;
            } else {
                var pattern = /^1[34578]\d{9}$/;
                if (!pattern.test(accountPhone)) {
                    console.log("手机号码格式不正确，请重新填写.")
                    layer.msg('手机号码格式不正确，请重新填写.', {icon: 6});
                    return false;
                }
            }

            if (accountEmail == '') {
                console.log("请输入电子邮箱.")
                layer.msg('请输入电子邮箱', {icon: 6});
                return false;
            } else {
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (!reg.test(accountEmail)) {
                    console.log("邮箱格式不正确，请重新填写.")
                    layer.msg('邮箱格式不正确，请重新填写.', {icon: 6});
                    return false;
                }
            }

            if (accountPassword == '') {
                console.log("请输入密码.")
                layer.msg('请输入密码', {icon: 6});
                return false;
            }

            if (accountPassword2 == '') {
                console.log("请输入确定密码.")
                layer.msg('请再次输入密码', {icon: 6});
                return false;
            }

            if (accountPassword != '' && accountPassword2 != '') {
                if (accountPassword != accountPassword2) {
                    layer.msg('两次输入的密码不正确', {icon: 5});
                    console.log("两次输入的密码不正确.")
                    return false;
                }
            }

            if (accountName != '' && accountPassword2 != '' && accountPassword != '' && accountEmail != '' && accountPhone != '' ) {
                var index2 = layer.load(3, {time: 10*5000});
                console.log(accountName+accountPassword2+accountEmail+accountPhone)
                $.ajax({
                    url: "${pageContext.request.contextPath}/accountUserRegister",
                    data: {
                        accountName: accountName,
                        accountPassword2: accountPassword2,
                        accountEmail: accountEmail,
                        accountPhone: accountPhone
                    },
                    dataType: 'json',
                    type: 'post', //HTTP请求类型
                    cache: false,
                    xhrFields: {widthCredentials: true},
                    success: function (data) {
                        if (data == "200") {
                            layer.close(index2);
                            $('input#accountName').val("");
                            $('input#accountPassword2').val("");
                            $('input#accountEmail').val("");
                            $('input#accountPhone').val("");
                            $('input#accountPassword').val("");
                            layer.msg('注册成功', {icon: 1});
                            window.location.reload();
                        }else  if (data == "100"){
                            layer.msg('用户名已经存在了', {icon: 5});
                            layer.close(index2);
                        }
                    },
                    error: function () {
                        layer.msg('注册异常', {icon: 2});
                        layer.close(index2);
                    }
                });
            }
        })
    })
</script>
</body>
</html>